<template>
    
    <!-- 
        数量控制器来说：
            只需要去负责对数量的逻辑处理，而不需要去管其他的东西（是在商品中被引用，还是在其他的父组件中被引用）
     -->

     <div class="number-manager">
         <span class="number-manager-less" :class="{'number-manager-disabled' : number === 1}" @click="onLessClick">-</span>
         <span class="number-manager-number">{{number}}</span>
         <span class="number-manager-add" @click="onAddClick">+</span>
     </div>

</template>

<script>
export default {
    props: {
        /**
            父组件指定的默认数量
         */
        defaultNumber: {
            type: Number,
            default: 1
        }
    },
    data: function () {
        return {
            // 数量数据源
            number: 1
        }
    },
    methods: {
        /**
         * 减号按钮点击事件
         */
        onLessClick: function () {
            if (this.number === 1) {
                return;
            }
            this.number -= 1;
        },
        /**
         * 加号按钮点击事件
         */
        onAddClick: function () {
            this.number += 1;
        }
    },
    watch: {
        /**
         * 监听 defaultNumber
         */
        defaultNumber: function (newV) {
            this.number = newV;
        },
        /**
         * 监听数量的变化，当数量发生变化时，通知父组件
         */
        number: function (newV) {
            this.$emit('onChangeNumber', newV);
        }
    }
}
</script>

<style lang="scss" scoped>
    @import '@css/style.scss';

    .number-manager {
        display: flex;
        font-size: $infoSize;
        height: px2rem(20);
        line-height: px2rem(20);

        span {
            width: px2rem(30);
            text-align: center;
            display: inline-block;
            font-weight: 500;
        }

        &-number {
            background-color: $bgColor;
            padding: 0 px2rem(4);
        }

        &-disabled {
            color: $hintColor;
        }
    }

</style>

